<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="public/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CDN模式下的工程化开发的模板 </title>
  <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
  <script src="https://unpkg.com/vue-router@4.0.3/dist/vue-router.global.js"></script>
  <script src="https://unpkg.com/vuex@4.0.0-rc.2/dist/vuex.global.js"></script>
  <link href="https://unpkg.com/element-plus@1.0.2-beta.30/lib/theme-chalk/index.css" rel="stylesheet">
  <script src="https://unpkg.com/element-plus@1.0.2-beta.30/lib/index.full.js"></script>
  <!--axios-->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript">
    // 假定 src在网站根目录
    let basrUrl = '/src/' 
    // 判断所处网站，确定基础url
    switch (window.location.origin) {
      case 'https://naturefwvue.github.io': //github
      case 'https://naturefw.gitee.io': //gitee
        basrUrl = '/nf-vue-cnd/cnd/project-template/src/'
        break
    }
    window.__ver = '?v=7'
    window.__basrUrl = basrUrl

  </script>
  <script type="module" src="src/script/appImport.js"></script>
  <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    #nav {
      padding: 30px;
    }
    #nav a {
      font-weight: bold;
      color: #2c3e50;
    }
    #nav a.router-link-exact-active {
      color: #42b983;
    }
    </style>
</head>
<body>
  <div>
    这里是CDN仿工程化开发的模板... 如果你没看到“首页”的内容，说明网页没有在网站的更目录。
  </div>
  <div id="app">
    <div id="nav">
      <p>
        <router-link :to="{name:'Home'}">首页</router-link>&nbsp;&nbsp;&nbsp;
        <router-link :to="{name:'About'}">关于</router-link>&nbsp;&nbsp;&nbsp;
        <router-link :to="{name:'component'}">异步组件</router-link>&nbsp;&nbsp;&nbsp;
        <router-link :to="{name:'store'}">状态管理</router-link>&nbsp;&nbsp;&nbsp;
      </p>
      <hr>
      <div style="text-align: left;margin-left: 100px;height: 450px;">
        <router-view></router-view>
      </div>
    </div>
    <hr>
    <div style="text-align: left;">
      vuex状态演示<br>
      $store.state ：{{$store.state}} <br>
     
      <el-button type="primary" @click="setCount">更改状态</el-button><br>
    </div>
    
  
  <script type="module" src="src/main.js?v=4"></script>
</body>
</html>

